<template>
	<view class="content pb-safe p-20">		
		<u-navbar
			title=""
			:placeholder="false"
			:autoBack="true"
		>
		</u-navbar>
		<!-- 顶部 -->
		<view class="relative headbg">
			<image class="img1" src="@/static/images/shezhinindexiaji.png" mode="widthFix"></image>
			<image class="img2" src="@/static/images/moneybag.png" mode="widthFix"></image>
		</view>
		
		<view class="boxbg">
			<view class="fs-28 pl-40 pt-16">下级等级</view>
			<view class="text-center flex-around-center c-fff mt-50">
				<view>
					<view class="p-10 rd-16 bg-fff-2 mb-10">
						<image class="w-80 h-80" src="@/static/images/v1.png" mode="widthFix"></image>
					</view>
					<view>一般代理</view>
				</view>
				<view>
					<view class="p-10 rd-16 bg-fff-2 mb-10">
						<image class="w-80 h-80" src="@/static/images/v2.png" mode="widthFix"></image>
					</view>
					<view>一般代理</view>
				</view>
				<view>
					<view class="p-10 rd-16 bg-fff-2 mb-10">
						<image class="w-80 h-80" src="@/static/images/v3.png" mode="widthFix"></image>
					</view>
					<view>一般代理</view>
				</view>
				<view>
					<view class="p-10 rd-16 bg-fff-2 mb-10">
						<image class="w-80 h-80" src="@/static/images/v4.png" mode="widthFix"></image>
					</view>
					<view>一般代理</view>
				</view>
			</view>
		</view>
		
		<view class="bg-fff rd-16 p-20 my-20 relative bubble">
			<view class="bg-info-2 rd-8 flex-between-center py-20 lh-36">
				<view class="flex-y-center">
					<view class="p-10 rd-16 bg-fff-2 m-10">
						<image class="w-100 h-100" src="@/static/images/v1.png" mode="widthFix"></image>
					</view>
					<view>
						<view class="fs-26">获得条件</view>
						<view class="fs-22 c-666">1.自然月内结算订单X单</view>
						<view class="fs-22 c-666">2.累计发展X个有效下级</view>
					</view>
				</view>
				<view class="bg-primary-2 color-primary rd-6 py-10 px-40 mr-20">修改</view>
			</view>
		</view>
		
		<view class="bg-fff rd-16 p-20 my-20 shadow-s">
			<view class="bg-info-2 rd-8 mb-20 lh-36 flex-y-center">
				<view class="p-10 rd-16 bg-fff-2 m-10">
					<image class="w-80 h-80" src="@/static/images/zixuan@2x.png" mode="widthFix"></image>
				</view>
				<view>
					<view class="fs-26">秒结订单</view>
					<view class="fs-22 c-666">您团队成员完成一单，您得到：10</view>
				</view>
			</view>
			
			<view class="bg-info-2 rd-8 mb-20 lh-36 flex-y-center">
				<view class="p-10 rd-16 bg-fff-2 m-10">
					<image class="w-80 h-80" src="@/static/images/zixuan@2x(1).png" mode="widthFix"></image>
				</view>
				<view>
					<view class="fs-26">次月结佣金</view>
					<view class="fs-22 c-666">您团队成员完成一单，您得到：10</view>
				</view>
			</view>
			
			<view class="bg-info-2 rd-8 lh-36 flex-y-center">
				<view class="p-10 rd-16 bg-fff-2 m-10">
					<image class="w-80 h-80" src="@/static/images/zixuan@2x(2).png" mode="widthFix"></image>
				</view>
				<view>
					<view class="fs-26">月月返佣金</view>
					<view class="fs-22 c-666">您团队成员完成一单，您得到：10</view>
				</view>
			</view>
		</view>
		
		
		<view class="bg-fff rd-16 p-20 my-20 shadow-s">
			<view class="fs-30">设置说明</view>
			<view class="c-666 lh-40 p-20">
				① 考核指标的订单为下级当月结算的自营订单，不可累计；发展的有效下级是累计数量（有效下级是指该下级拓展≥3个下级且完成订单≥6个）；<br> ② 您的下级一共为4个等级（您如不修改，默认执行系统设置的数据），您新拓展的下级默认为一般代理，您可以通过代理列表直接赋予他更高等级 <br>③ 您的下级达到设置的标准后将自行升级，您也可以通过代理列表直接给您的下级赋予等级标准； 您的下级升级后，TA做单获得的佣金将升高，您从下级处得到的佣金将降低。 <br>④ 当下级团队成员已结算数量达到2000单、同时有效下级数量达到50个，该下级将脱离您成为合伙人V1
			</view>
		</view>
		<view class="h-100"></view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			
		}
	}
</script>

<style lang="less">
	.headbg{
		height: 180px;
	}
	.img1{
		width: 60%;
		position:absolute;
		bottom: 10px;
	}
	.img2{
		width: 60%;
		right: -20px;
		position: absolute;bottom: -90px;
	}
	.boxbg{
		background:url('@/static/images/hyqyk@2x.png') no-repeat;
		width: 100%;
		box-sizing: border-box;
		background-size: 100%;
		height:160px;
		position: relative;
		z-index: 3;
		margin-top: 20px;
	}
	.bubble {
	  position: relative; /* 为伪元素定位做准备 */
	  box-shadow: 0 0 8rpx 0 rgba(0,0,0,0.1); /* 阴影：水平偏移 垂直偏移 模糊 颜色 */
	}

	/* 指示角（伪元素） */
	.bubble::before {
	  content: ""; /* 伪元素必须有 content */
	  position: absolute;
	  top: -10px; /* 向上偏移，调整位置 */
	  // 10%,35%,60%,85%;
	  left:10%; /* 水平位置 */
	  width: 0;
	  height: 0;
	  border-left: 20rpx solid transparent; /* 左边透明 */
	  border-right: 20rpx solid transparent; /* 右边透明 */
	  border-bottom: 20rpx solid #fff; /* 底部颜色与气泡背景一致 */
	  filter: drop-shadow(0 0 8rpx 0 rgba(0,0,0,0.1));
	}
</style>
